<template>
	<view class="container">
			<uni-swipe-action>
				<view v-for="(goods,index) in shopcartList" :key="index">
					<uni-swipe-action-item :right-options="options" @click="removeProduct(goods)">
						<view class="goods-item">
							<view class="goods-item-left">
								<radio :checked="goods.checked" color="#C00000" @click="radioChange(goods)"></radio>
								<image :src="goods.coverImg" class="goods-pic"></image>
							</view>
							<view class="goods-item-right">
								<view class="goods-name">{{goods.title}}</view>
								<!-- 商品价格 -->
								<view class="goods-price">￥{{goods.price}}</view>
								<!-- 商品数量 -->
								<view class="goods-name">{{goods.params.join(" ")}}</view>
								<u-number-box :min="1" v-model="goods.count" @change="changeNum(goods)"></u-number-box>
							</view>
						</view>					
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
			<view class="bottom-bar">
				<view class="">
					 总价:{{totalPrice}}
				</view>
				<view class="jiesuanbtn">
					结算({{shopcartLen}})个
				</view>
			</view>
			
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapState,mapMutations,mapGetters}=createNamespacedHelpers('shopcart')
	const {mapState:mapUserState,mapActions:mapUserActions}=createNamespacedHelpers('users')
	export default {
		data() {
			return {
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#C00000'
						}
					}
				]
			};
		},
		computed:{
			...mapState(['shopcartList']),
			...mapGetters(['totalPrice','shopcartLen']),
			...mapUserState(['userInfo','authToken'])
			
		},
		methods:{
			...mapMutations(['updateShopcartCount','updateShopcartCheckStatus','removeShopcart']),
			...mapUserActions(['safeLogoutAsync']),
			changeNum(arg){
				this.updateShopcartCount(arg)
			},
			radioChange(arg){
				this.updateShopcartCheckStatus(arg)
			},
			removeProduct(arg){
				this.removeShopcart(arg)
			},
			async getSafe(){
				const result=await uni.$api.mineModules.safeApi({uid:this.userInfo.uid,auth_token:this.authToken})
				if(result.data.status==0){
					this.safeLogoutAsync(this.userInfo.uid)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					return true
				}
			}
		},
		onShow() {
			this.getSafe()
		}
	}
</script>

<style lang="scss">
.container {
		.goods-item {
			width: 750rpx;
			display: flex;
			margin: 20rpx 10rpx;
			padding: 20rpx;
			font-size: 26rpx;
			.goods-item-left {
				margin-right: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goods-pic {
					width: 100px;
					height: 100px;
					display: block;
				}
			}

			.goods-item-right {
				.goods-price {
					color: #C00000;
				}
			}

		}
		.bottom-bar{
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 120rpx;
			width: 750rpx;
			height: 90rpx;
			background-color: #f5f5f5;
			align-items: center;
			.jiesuanbtn{
				 box-sizing: border-box;
				 width: 200rpx;
				 background-color: #CC6000;
				 color: white;
				 height: 80rpx;
				 text-align: center;
				 line-height: 80rpx;
				 border-radius: 40rpx;
			}
		}
	}
</style>
